define(
	[
		'require',
		'apm/ui/myself_select/select'
	],
	function (require) {
		"use strict";
		// var View = Ember.View.extend({
		// 	select: require('apm/ui/myself_select/select')
		// });
		var areaCache = {};

		//省, 市, 区/县 列表计算
		function computedList(key, value) {
			var defaults = {
				name: "省份",
				code: ""
			};

			switch(key){
				case "cityLists":
					defaults.name = "市"
					break;
				case "countyLists":
					defaults.name = "区/县"
					break;
			}

			if (arguments.length == 1) {
				return Ember.A([defaults]);
			} else {
				value.unshift(defaults);
				return value;
			}
		}

		//省, 市, 区/县 列表变化后, 计算code默认值
		function observerListChange(view, listKey, codeKey, index){
			var list = view.get(listKey),
				areaCode = view.get("areaCode");

			var code = (areaCode && (areaCode.length >= index)) ? areaCode.substring(0, index) : "";
			code = !code ? list[0].code : code;

			view.set(codeKey, code);
		}

		var AreaSelectView = Ember.Component.extend({
			classNames: "area-selector",

			select: require('apm/ui/myself_select/select'),

			layout: Ember.HTMLBars.compile(


				[
					'{{view view.select class="form-top-select pull-left area-global" content=gloLists selectValue=globleCode optionLabelPath="name" optionValuePath="code"}}',
					'{{view view.select class="form-top-select pull-left area-province" content=protLists selectValue=proCode optionLabelPath="name" optionValuePath="code"}}',
					'{{view view.select class="form-top-select pull-left area-city" content=cityLists selectValue=cityCode optionLabelPath="name" optionValuePath="code"}}',
					'{{#if needCounty}}{{view view.select class="form-top-select pull-left area-country" content=countyLists selectValue=countyCode optionLabelPath="name" optionValuePath="code"}}{{/if}}'
				// '{{view "select" class="global" content=gloLists optionLabelPath="content.name" optionValuePath="content.code" value=globleCode}}',
				// '{{view "select" class="province" content=protLists optionLabelPath="content.name" optionValuePath="content.code" value=proCode}}',
				// '{{view "select" class="city" content=cityLists optionLabelPath="content.name" optionValuePath="content.code" value=cityCode}}',
				// '{{#if needCounty}}{{view "select" class="county" content=countyLists optionLabelPath="content.name" optionValuePath="content.code" value=countyCode}}{{/if}}'
				].join('')
			),

			needCounty: false,

			gloLists: Ember.computed(function() {
				var me = this;

				var defaults = {
					"name": "",
					"code": ""
				};
				if (arguments.length == 1) {
					this.getAreaData(null).then(function(data) {
						me.set("gloLists", data);
					});
					return Ember.A([defaults]);
				}
			}),

			protLists: Ember.computed(computedList),

			cityLists: Ember.computed(computedList),

			countyLists: Ember.computed(computedList),

			globleCode: "",

			proCode: "",

			cityCode: "",

			countyCode: "",

			gloListsChange: Ember.observer("gloLists", function(me, listKey) {
				observerListChange(me, listKey, 'globleCode', 2);
			}),

			protListsChange: Ember.observer("protLists", function(me, listKey) {
				observerListChange(me, listKey, 'proCode', 4);
			}),

			cityListsChange: Ember.observer("cityLists", function(me, listKey) {
				observerListChange(me, listKey, 'cityCode', 6);
			}),

			countyListsChange: Ember.observer("countyLists", function(me, listKey) {
				observerListChange(me, listKey, 'countyCode', 8);
			}),

			globleCodeChange: Ember.observer("globleCode", function(me, codeKey) {
				var me = this,
					code = this.get(codeKey),
					areaCode = this.get("areaCode"),
					oldCode = areaCode ? areaCode.substring(0, 2) : "";

				if (code) {
					if(code != oldCode){
						me.set("areaCode", code);
					}
					me.getAreaData(code).then(function(data) {
						me.set("protLists", data);
					}, function(){
						me.set("protLists", Ember.A());
					});
				}else{
					me.set("protLists", Ember.A());
				}
			}),

			proCodeChange: Ember.observer("proCode", function(me, codeKey) {
				var me = this,
					code = this.get(codeKey),
					areaCode = this.get("areaCode"),
					oldCode = areaCode ? areaCode.substring(0, 4) : "";

				if (code) {
					if(code != oldCode){
						me.set("areaCode", code);
					}

					if ( !me.needCounty && ['0000', '0001', '0002', '0003', '0031', '0032', '0033'].indexOf(code) != -1 ) {
						me.set("cityLists", Ember.A());
						return;
					}

					me.getAreaData(code).then(function(data) {
						me.set("cityLists", data);
					}, function(){
						me.set("cityLists", Ember.A());
					});
				} else {
					if(code == ""){
						me.set("areaCode", this.get("globleCode"));
					}
					me.set("cityLists", Ember.A());
				}
			}),

			cityCodeChange: Ember.observer("cityCode", function(me, codeKey) {
				var me = this,
					code = this.get(codeKey),
					areaCode = this.get("areaCode"),
					oldCode = areaCode ? areaCode.substring(0, 6) : "";

				if(!me.needCounty){
					me.set("areaCode", code||me.get("proCode")||this.get("globleCode"));
					return;
				}
				if (code) {
					if(code != oldCode){
						me.set("areaCode", code);
					}
					me.getAreaData(code).then(function(data) {
						me.set("countyLists", data);
					}, function(){
						me.set("countyLists", Ember.A());
					});
				} else {
					if(code == ""){
						me.set("areaCode", this.get("proCode")||this.get("globleCode"));
					}
					me.set("countyLists", Ember.A());
				}
			}),

			countyCodeChange: Ember.observer("countyCode", function(me, codeKey) {
				me.set("areaCode", me.get(codeKey)||me.get("cityCode")||this.get("proCode")||this.get("globleCode"));
			}),

			areaCodeChange: Ember.observer("areaCode", function() {
								var areaCode = this.get("areaCode"),
					length = areaCode ? areaCode.length : 0,
					dict = {
						"2": 'globleCode',
						"4": 'proCode',
						"6": 'cityCode',
						"8": 'countyCode'
					},
					field = dict[length];

				if (field && (this.get(field) != areaCode) && length > 2) {
					for (var i in dict) {
						if (i <= length && areaCode.length >= i) {
							this.set(dict[i], areaCode.substring(0, i));
						} else {
							this.set(dict[i], '');
						}
					}
				}else if(field && length == 2){
					for (var i in dict) {
						if (i <= length && areaCode.length >= i) {
							this.set(dict[i], areaCode.substring(0, i));
						} else {
							this.set(dict[i], '');
						}
					}
				}
			}),

			getAreaData: function(areaCode) {
				var store = this.container.lookup("store:apm");
				if (areaCache[areaCode]) {
					return Ember.RSVP.resolve( Em.A(Ember.copy(areaCache[areaCode])) );
				} else {
					return store.ajax("GET", "configs/position/area", {
						areaCode: areaCode
					}).then(function(response) {
						var data = response.area;
						areaCache[areaCode] = data;
						return Em.A(Ember.copy(data));
					});
				}
			}
		});

		APM.ui.AreaSelect = AreaSelectView;

		return AreaSelectView;

	}
);